<template>
  <div class="problem-handling">
    <div class="chart" id="problemHandlingBar"></div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
import { getMonth, getRandomData } from '@/utils/utils'
export default {
  name: 'ProblemHandling',
  methods: {
    initChart() {
      const chart=echarts.init(document.getElementById('problemHandlingBar'))
      const option={
        tooltip: {
          trigger: 'axis',
        },
        xAxis:{
          type:'category',
          data:['停车纠纷','噪音投诉','公共设施维修','其他'],
          axisLabel:{
            color:'#fff'
          },
          axisTick:{
            show:false
          },
          axisLine:{
            show:true,
            lineStyle:{
              color:'#0F4789'
            }
          }
        },
        grid:{
          left:10,
          top:30,
          right:20,
          bottom:10,
          containLabel:true
        },
        yAxis:{
          name:'单位：天',
          nameTextStyle:{
            color:'#fff'
          },
          type:'value',
          axisLabel:{
            color:'#fff'
          },
          splitLine:{
            show:true,
            lineStyle:{
              color:'rgba(77,89,103,0.5)',
            }
          }
        },
        series:[
          {
            name:'处理时间',
            type:'bar',
            data:getRandomData(11,3,4),
            showBackground:true,
            barWidth:15,
            backgroundStyle:{
              color:'rgba(49,167,255,0.2)',
              borderRadius:10
            },
            itemStyle:{
              color:new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#01D2F5',
                },
                {
                  offset: 1,
                  color: '#2393FF',
                }
              ]),
              borderRadius:10
            }
          },
        ]
      }
      chart.setOption(option)
    }
  },
  mounted() {
    this.initChart()
  }
}
</script>
<style scoped lang="scss">
.problem-handling {
  width: 100%;
  height: 100%;
  .chart {
    width: 100%;
    height: 100%;
  }
}
</style>
